<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>半实物装备信息注册</title>
	<meta name="description" content="试验装备管理软件">
	<!-- Bootstrap CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<!-- 字体CSS -->
	<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<!-- 自定义样式 -->
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

	<link href="assets/plugins/datetimepicker/css/daterangepicker.css" rel="stylesheet" />
	<link rel="stylesheet" href="./assets/layui/css/layui.css">
	<style>
		.parsley-error {
			border-color: #ff5d48 !important;
		}

		.parsley-errors-list.filled {
			display: block;
		}

		.parsley-errors-list {
			display: none;
			margin: 0;
			padding: 0;
		}

		.parsley-errors-list>li {
			font-size: 12px;
			list-style: none;
			color: #ff5d48;
			margin-top: 5px;
		}

		.form-section {
			padding-left: 15px;
			border-left: 2px solid #FF851B;
			display: none;
		}

		.form-section.current {
			display: inherit;
		}

		body {
			padding-bottom: 0;
		}

		.card-height .form-group {
			margin-top: 40px;
		}

		.card-height .form-group:first-of-type {
			margin-top: 0;
		}
		.sub-text{
			color:#95a1ab;
			margin: 10px 0px;
		}
		.content-right .form-group label{
			text-align: left;
			margin-left: 10px;
		}
		.demo-form h6{
			color:#bdd1e1;
			margin: 10px 0px;
			font-size: 16px;
		}
	</style>
</head>

<body class="adminbody">
	<div id="main">
		<!-- 头部导航 -->
		<div class="headerbar">
			<!-- LOGO -->
			<div class="headerbar-left">
				<a href="index.html" class="logo">
					<img alt="Logo" src="assets/images/logo.png" />
					<span>试验资源管理软件</span>
				</a>
			</div>

			<nav class="navbar-custom">
				<ul class="list-inline float-right mb-0">
					<li class="list-inline-item dropdown notif">
						<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
							aria-haspopup="false" aria-expanded="false">
							<i class="fa fa-fw fa-bell-o"></i><span class="notif-bullet"></span>
						</a>
						<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg">
							<!-- item-->
							<div class="dropdown-item noti-title">
								<h5><small><span class="label label-danger pull-xs-right">1</span>消息提醒</small></h5>
							</div>
							<!-- item-->
							<a href="#" class="dropdown-item notify-item">
								<div class="notify-icon bg-faded">
									<img src="assets/images/avatars/avatar2.png" alt="img"
										class="rounded-circle img-fluid">
								</div>
								<p class="notify-details">
									<b>Admin</b>
									<span>用户信息注册成功</span>
									<small class="text-muted">3分钟前</small>
								</p>
							</a>
							<!-- All-->
							<a href="#" class="dropdown-item notify-item notify-all">
								查看所有消息
							</a>

						</div>
					</li>

					<li class="list-inline-item dropdown notif">
						<a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
							aria-haspopup="false" aria-expanded="false">
							<img src="assets/images/avatars/admin.png" alt="Profile image" class="avatar-rounded">
						</a>
						<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
							<!-- item-->
							<div class="dropdown-item noti-title">
								<h5 class="text-overflow"><small>Hello, admin</small> </h5>
							</div>

							<!-- item-->
							<a href="pro-profile.html" class="dropdown-item notify-item">
								<i class="fa fa-user"></i> <span>个人中心</span>
							</a>

							<!-- item-->
							<a href="#" class="dropdown-item notify-item">
								<i class="fa fa-power-off"></i> <span>退出</span>
							</a>
						</div>
					</li>

				</ul>

				<ul class="list-inline menu-left mb-0">
					<li class="float-left">
						<button class="button-menu-mobile open-left">
							<i class="fa fa-fw fa-bars"></i>
						</button>
					</li>
				</ul>

			</nav>

		</div>
		<!-- 头部导航End -->
		<!-- 左侧导航开始 start-->
		<div class="left main-sidebar">
			<div class="sidebar-inner leftscroll">
				<div id="sidebar-menu">
					<ul>
						<li class="submenu">
							<a href="index.html"><i class="fa fa-fw fa-bars"></i><span>首页</span> </a>
						</li>
						<li class="submenu active">
							<a href="#" class='active'><i class="fa fa-fw fa-tv"></i> <span>试验资源注册模块</span>
								<span class="menu-arrow"></span>
							</a>
							<ul class="list-unstyled">
								<li><a href="ui-alerts.html">实装信息注册</a></li>
								<li class='active'><a href="entityRegister.html">半实物装备信息注册</a></li>
								<li><a href="ui-cards.html">数字仿真模型信息注册</a></li>
								<li><a href="personRegistration.html">人员信息注册</a></li>
								<li><a href="ui-collapse.html">场地信息注册</a></li>
							</ul>
						</li>
						<li class="submenu">
							<a href="#">
								<i class="fa fa-fw fa-table"></i>
								<span> 资源导入导出模块</span>
								<span class="menu-arrow"></span>
							</a>
							<ul class="list-unstyled">
								<li><a href="ui-alerts.html">实装信息</a></li>
								<li><a href="ui-buttons.html">半实物装备信息</a></li>
								<li><a href="ui-cards.html">数字仿真模型信息</a></li>
								<li><a href="ui-carousel.html">人员信息</a></li>
								<li><a href="ui-collapse.html">场地信息</a></li>
							</ul>
						</li>
						<li class="submenu">
							<a href="#"><i class="fa fa-fw fa-file-text-o"></i> <span>试验资源编辑模块</span>
								<span class="menu-arrow"></span>
							</a>
							<ul class="list-unstyled">
								<li><a href="ui-alerts.html">实装信息编辑</a></li>
								<li><a href="ui-buttons.html">半实物装备信息编辑</a></li>
								<li><a href="ui-cards.html">数字仿真模型信息编辑</a></li>
								<li><a href="ui-carousel.html">人员信息编辑</a></li>
								<li><a href="ui-collapse.html">场地信息编辑</a></li>
							</ul>
						</li>
						<li class="submenu">
							<a href="#">
								<i class="fa fa-fw fa-th"></i>
								<span>综合资源查询模块 </span>
								<span class="menu-arrow"></span>
							</a>
							<ul class="list-unstyled">
								<li><a href="ui-alerts.html">实装信息查询</a></li>
								<li><a href="ui-buttons.html">半实物装备信息查询</a></li>
								<li><a href="ui-cards.html">数字仿真模型信息查询</a></li>
								<li><a href="ui-carousel.html">人员信息查询</a></li>
								<li><a href="ui-collapse.html">场地信息查询</a></li>
							</ul>
						</li>
						<li class="submenu">
							<a href="javascript:;">
								<i class="fa fa-fw fa-area-chart"></i>
								<span> 试验资源监视模块 </span>
								<span class='menu-arrow'></span>
							</a>
							<ul class="list-unstyled">
								<li><a href="ui-alerts.html">实装信息监视</a></li>
								<li><a href="ui-buttons.html">半实物装备信息监视</a></li>
								<li><a href="ui-cards.html">数字仿真模型信息监视</a></li>
								<li><a href="ui-carousel.html">人员信息监视</a></li>
								<li><a href="ui-collapse.html">场地信息监视</a></li>
							</ul>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="clearfix"></div>

			</div>

		</div>
		<!-- End 左侧导航 -->
		<div class="content-page">
			<!-- Start content -->
			<div class="content">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5">
						<div class="card mb-3">
							<div class="card-header">
								<h3>
									<!-- 缺图标 -->
									<!-- <i class="fa fa-user"></i> -->
									半实物装备列表
								</h3>
							</div>
							<div class="card-body" style='height:500px;'>
								<form action="#" data-parsley-validate novalidate>
									<div class="form-group">
										<label for="name">名称<span class="text-danger">*</span></label>
										<input type="text" name="name" data-parsley-trigger="change" required
											   placeholder="请输入名称" class="form-control" id="name">
									</div>
									<div class="form-group">
										<label for="type">类型<span class="text-danger">*</span></label>
										<input type="text" name="type" data-parsley-trigger="change" required
											placeholder="请输入类型" class="form-control" id="type">
									</div>
									<div class="form-group">
										<label for="number">编号<span class="text-danger">*</span></label>
										<input type="text" name="number" data-parsley-trigger="change" required
											placeholder="请输入编号" class="form-control" id="number">
									</div>
                                    <div class="form-group">
                                        <label for="temName">仿真名称/仿真模型
                                            <span class="text-danger">*</span>
                                        </label>
                                        <select required class="form-control" id="temName">
                                            <option value="">请选择</option>
                                            <option value="一">一</option>
                                            <option value="二">二</option>
                                            <option value="三">三</option>
                                        </select>
                                    </div>
									<div class="form-group">
										<label for="unit">研制单位
											<span class="text-danger">*</span>
										</label>
										<select required class="form-control" id="unit">
											<option value="">请选择</option>
											<option value="单位一">单位一</option>
											<option value="单位二">单位二</option>
											<option value="单位三">单位三</option>
										</select>
									</div>
									<div class="form-group">
										<label for="forces">所属部队
											<span class="text-danger">*</span>
										</label>
										<select required class="form-control" id="forces">
											<option value="">请选择</option>
											<option value="部队一">部队一</option>
											<option value="部队二">部队二</option>
											<option value="部队三">部队三</option>
										</select>
									</div>
									<div class="form-group">
										<label for="property">主要性能
											<span class="text-danger">*</span>
										</label>
										<input type="text" name="property" data-parsley-trigger="change" required
											placeholder="请输入主要性能" class="form-control" id="property" onchange="prototypeChange(this)">
									</div>
									<div class="form-group">
										<!--<label for="state">状态信息-->
											<!--<span class="text-danger">*</span>-->
										<!--</label>-->
										<!--<input type="text" name="state" data-parsley-trigger="change" required-->
												   <!--placeholder="请输入状态信息" class="form-control" id="state">-->

									</div>
									<div class="form-group">
                                        <label for="matchableModel">可匹配模型
                                            <span class="text-danger">*</span>
                                        </label>
                                        <select required class="form-control" id="matchableModel">
                                            <option value="">请选择</option>
                                            <option value="一">一</option>
                                            <option value="二">二</option>
                                            <option value="三">三</option>
                                        </select>
									</div>
								</form>
							</div>
						</div><!-- end card-->
					</div>
					<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7 col-xl-7">
						<div class="card mb-3 content-right">
							<div class="card-header">
								<h3>
									<!-- <i class="fa fa-hand-pointer-o"></i> -->
									信息填写</h3>
							</div>

							<div class="card-body card-height" style='height:500px;'>
								<form class="demo-form" action="#">
									<div id="mainPerformance">
										<h6 class="">主要性能:</h6>
										<div class="row" style="justify-content: space-between;height: 135px;overflow: auto;">
										</div>
									</div>
									<div id="mainPar">
										<h6 class="">输入输出接口参数:</h6>
										<div class="row" style="justify-content: space-around;">
											<div class=" col-md-6 col-lg-6">
												<div class="form-group">
													<label for="inParam">输入接口</label>
													<input type="text" name="inParam" placeholder="请填写输入接口" class="form-control"
														   id="inParam">
												</div>
											</div>
											<div class=" col-md-6 col-lg-6">
												<div class="form-group">
													<label for="outParam">输出接口</label>
													<input type="text" name="outParam" placeholder="请填写输出接口" class="form-control"
														   id="outParam">
												</div>
											</div>
										</div>
									</div>

									<div id="stateInfo">
										<h6 class="">使用信息:</h6>
										<div class="row">
											<div class="layui-col-xs6">
												<div class="form-group">
													<label for="state">状态信息
														<span class="text-danger">*</span>
													</label>
													<input type="text" name="state" data-parsley-trigger="change" required
														   placeholder="请输入状态信息" class="form-control" id="state">
												</div>
											</div>
											<div class="layui-col-xs6">
												<div class="form-group">
													<label for="address">使用地点</label>
													<input type="text" name="address" placeholder="请输入使用地点" class="form-control"
														   id="address">
												</div>
											</div>
											<div class="layui-col-xs6">
												<div class="layui-form" >
													<div class="layui-form-item" >
														<label class="layui-form-label" style="width: 24%;text-align: left;color: #95a1ab;font-size: 1rem;">日期范围</label>
														<div class="layui-input-inline " style="width: 76%; margin-right: 0px;">
															<input type="text" class="layui-input form-control" id="test6" placeholder="请选择日期范围"
																   style="background:#343f67;border-radius: 4px;border:none;">
														</div>
													</div>
												</div>
											</div>


										</div>
									</div>
								</form>
							</div>
						</div><!-- end card-->
					</div>
					<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6" style='margin: 20px auto'>
						<button class="btn btn-primary btn-size col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"
							type="submit" onclick="infoCommit()">
							提交
						</button>
					</div>

				</div>
			</div>
		</div>
	</div>
	<script src="assets/js/modernizr.min.js"></script>
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/moment.min.js"></script>
	<script src="assets/js/popper.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>

	<script src="assets/js/detect.js"></script>
	<script src="assets/js/fastclick.js"></script>
	<script src="assets/js/jquery.blockUI.js"></script>
	<script src="assets/js/jquery.nicescroll.js"></script>

	<!-- App js -->
	<script src="assets/js/pikeadmin.js"></script>
	<!-- 验证表单 -->
	<script src="assets/plugins/parsleyjs/parsley.min.js"></script>
	<script src="assets/plugins/datetimepicker/js/moment.min.js"></script>
	<script src="assets/plugins/datetimepicker/js/daterangepicker.js"></script>
	<script src="./assets/layui/layui.js" charset="utf-8"></script>
	<script>
		var equipmentId=1,layer;//装备id,此处将来需要改动
		layui.use('layer', function(){
			layer=layui.layer;
		});
		var dateRange;
		layui.use('laydate', function(){
			var laydate = layui.laydate;
			//日期范围
			laydate.render({
				elem: '#test6'
				,range: true,
				done: function(value, date, endDate){
					console.log(value); //得到日期生成的值，如：2017-08-18
					dateRange=value;
					console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
					console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
				}
			});
		})
		//根据主要性能输入添加性能参数
		function prototypeChange(t){
			var val=t.value;
			console.log(val)
			var str=`<div class="col-xs-4">
						<div class="form-group">
							<label  style="margin-left: 20px;">${val}</label>
							<input type="text"  placeholder="请输入${val}" class="form-control"
									>
						</div>
					 </div>`;
			var ele=$(".content-right form .row:first-child ");
			    ele.append(str);
		}
		//动态查询主要性能
		$(function () {
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/x-www-form-urlencoded",
				//请求地址
				url : "/rm/hard/findAllPerformances",
				//数据，json字符串
				data : {"equipmentId":equipmentId},
				//请求成功
				success : function(res) {
					if (res.status==0){
						var data=res.data;
						var str='';
						for (let i of data){
							str=`<div class="col-xs-4">
										<div class="form-group">
										<label for="range" >${i.performanceName}</label>
										<input type="text" name="range" placeholder=请输入${i.performanceName} class="form-control"
												data-id=${i.id}>
									</div>`;
							$('#mainPerformance .row').append(str);
						}
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.error(e.status);
					console.error(e.responseText);
				}
			})
		})
		//提交
		function infoCommit() {
			var paramObj={},paramArr=["name","type","number","unit","forces","inParam","outParam","state","address","matchableModel"],inpVal='',dateObj,obj;
			var arr=[],startDate,endDate,dataArr=dateRange?dateRange.split(' '):['','',''],useObj={};
			for (let i of paramArr){
				inpVal=document.getElementById(i).value;
				if (i=="matchableModel"){
					paramObj[i]="1,2";//可匹配模型 暂时传 "1,2"
				}else if (i=='state' || i=='address'){
					useObj[i]=inpVal;
				}else {
					paramObj[i]=inpVal;
				}
			}
			//	主要性能获取
			var propertyArr=$("#mainPerformance .col-xs-4 .form-group");
			for (let k=0;k<propertyArr.length;k++){
				var eve=propertyArr[k]
				// var performanceName=$(eve).children('label').text();
				var performanceValue=$(eve).children('input').val();
				var performanceId=$(eve).children('input').attr('data-id');
				arr.push({performanceId,performanceValue});
			}
			//日期范围获取
			startDate=dataArr[0];
			endDate=dataArr[2];
			dateObj={ performances:arr,stateInfos:[Object.assign({startTime:startDate,endTime:endDate},useObj)]}
			obj=Object.assign(paramObj,{equipmentId},dateObj)
			console.log(obj)
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json",
				//请求地址
				url : "/rm/hard/hardWareRegist",
				//数据，json字符串
				data : JSON.stringify(obj),
				//请求成功
				success : function(res) {
					console.log(res);
					if (res.status==0){
						layer.msg('注册成功！');
					}else {
						layer.msg('注册失败！');
					}

				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.error(e.status);
					console.error(e.responseText);
				}
			});
		}



	</script>
</body>

</html>